<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width" />

    <title>Fetch basic response example</title>

    <link rel="stylesheet" href="" />
  </head>

  <body>
    <h1>Fetch basic response example</h1>
    <img src="" />

    <script>
      const myImage = document.querySelector("img");

      const myRequest = new Request("flowers.jpg");

      fetch(myRequest)
        .then((response) => {
          console.log("response.type =", response.type);
          console.log("response.url =", response.url);
          console.log("response.userFinalURL =", response.useFinalURL);
          console.log("response.status =", response.status);
          console.log("response.ok =", response.ok);
          console.log("response.statusText =", response.statusText);
          console.log("response.headers =", response.headers);
          if (!response.ok) {
            throw new Error(`HTTP error, status = ${response.status}`);
          }
          return response.blob();
        })
        .then((myBlob) => {
          const objectURL = URL.createObjectURL(myBlob);
          myImage.src = objectURL;
        })
        .catch((error) => {
          const p = document.createElement("p");
          p.appendChild(document.createTextNode(`Error: ${error.message}`));
          document.body.insertBefore(p, myImage);
        });

      const myBlob = new Blob();
      const options = { status: 200, statusText: "SuperSmashingGreat!" };
      const myResponse = new Response(myBlob, options);
    </script>
  </body>
</html>
